<template>
  <div
    class="ysqjcdp-chart-legend"
    :class="horizontalLayout ? 'horizontal-layout': 'vertical-layout'"
  >
    <div
      v-for="(item,index) in legends"
      :key="index"
      class="chart-legend-item"
      :class="isVertical ? 'd-flex-c' :'flex-ai-c'"
    >
      <template v-if="isVertical">
        <div class="flex-ai-c jc-c">
          <span
            class="f-18 ff-agencyyr f-w7 m-r-tiny"
            :class="{'c-pointer':needClick}"
            @click="$emit('valueClick',item)"
          > {{ item.field ? valueData[item.field] : '-' }}</span>
          <span class="f-12"> {{ item.unit }}</span>
        </div>
        <div class="flex-ai-c jc-c">
          <!-- <div
            :class="item.iconType"
            :style="{color:item.color}"
            class="m-r-tiny"
          /> -->
          <span
            class="f-12"
            :style="{color:item.color}"
          >
            {{ item.name }}
          </span>
        </div>
      </template>
      <template v-else>
        <div class="flex-ai-c jc-c m-r-mini">
          <!-- <div
            :class="item.iconType"
            :style="{color:item.color}"
            class="m-r-tiny"
          /> -->
          <span
            class="f-12"
            :style="{color:item.color}"
          >
            {{ item.name }}
          </span>
        </div>
        <div class="flex-ai-c jc-c">
          <span

            class="f-18 ff-agencyyr f-w7 m-r-tiny"
            :class="{'c-pointer':needClick}"
            @click="$emit('valueClick',item)"
          > {{ item.field ? valueData[item.field] : '-' }}</span>
          <span class="f-12"> {{ item.unit }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
// iconType: line,rect
export default {
  name: 'YsqjcdpChartLegend',
  props: {
    legends: {
      type: Array,
      required: true,
      default: () => []
    },
    valueData: {
      type: Object,
      required: true,
      default: () => {}
    },
    isVertical: {
      type: Boolean,
      default: true
      // horizontal
    },
    needClick: {
      type: Boolean,
      default: true
    },
    horizontalLayout: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.horizontal-layout {
  display: flex;
  align-items: center;

  .chart-legend-item {
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
}

.vertical-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-legend-item {
  width: fit-content;

  // &:not(:last-child) {
  //   margin-right: 17px;
  // }

  .rect {
    width: 13px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(0deg, rgba(7, 255, 222, 0) 0%, currentcolor 100%);
  }

  .line {
    width: 13px;
    height: 1px;
    background: #ff5400;
    border-radius: 1px;
    background-color: currentcolor;
  }
}

</style>
